<template>
  <div class="outpatient-time-image">
    <div class="time-text">{{ formattedTime }}</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import moment from 'moment'

interface Props {
  outpatientTime: string
}

const props = defineProps<Props>()

const formattedTime = computed(() => {
  if (!props.outpatientTime) return ''
  
  const date = moment(props.outpatientTime)
  const year = date.format('YYYY')
  const month = date.format('MM')
  const day = date.format('DD')
  
  // 判断是上午还是下午
  const hour = date.hour()
  const period = hour < 12 ? '上午' : '下午'
  
  // 将英文星期几转换为中文
  const weekdayMap: { [key: string]: string } = {
    'Monday': '周一',
    'Tuesday': '周二', 
    'Wednesday': '周三',
    'Thursday': '周四',
    'Friday': '周五',
    'Saturday': '周六',
    'Sunday': '周日'
  }
  
  const weekday = weekdayMap[date.format('dddd')] || date.format('dddd')
  
  return `${year}年${month}月${day}日\n${weekday}${period}`
})
</script>

<style scoped>
.outpatient-time-image {
  display: inline-block;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 8px 12px;
  position: relative;
  overflow: hidden;
}

.time-text {
  font-size: 14px;
  color: #6c757d;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.5px;
  white-space: pre-line;
}

/* 添加一些视觉效果使其更像图片 */
.outpatient-time-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
}

.outpatient-time-image::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  pointer-events: none;
}
</style>
